
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"  dir="ltr">
<head>

  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta name="description" content="Access the desktop camera and video using HTML, JavaScript, and Canvas.  The camera may be controlled using HTML5 and getUserMedia." />


  <!--bootstrap-->
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">

  <!-- bootstrap-lightbox -->  
  <link href="<?php echo base_url();?>/css/lightbox.css" rel="stylesheet" type="text/css" />

  <!-- caption css -->
  <link href="<?php echo base_url();?>/css/caption.css" rel="stylesheet" type="text/css" />

  <!--My Styles-->
  <link href="<?php echo base_url();?>/css/search-form.css" rel="stylesheet" type="text/css" />
  <link href="<?php echo base_url();?>/css/style.css" rel="stylesheet" type="text/css" />

  <!--jqueryUI-->
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/blitzer/jquery-ui.min.css" />

  <!--cdn google-->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

  <!--bootstrap-->
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

  <!--jquery datepicker-->
  <script type="text/javascript" src="<?php echo base_url();?>/js/show_datepicker.js"></script>

  <!-- bootstrap3-typehead -->
  <script type="text/javascript" src="<?php echo base_url();?>/js/bootstrap3-typehead.js"></script>

  <!-- jquery validation -->
  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>

  <!-- bootstrap-lightbox --> 
  <script type="text/javascript" src="<?php echo base_url();?>/js/lightbox-2.6.min.js"></script>

  <!-- caption javascript -->
  <script type="text/javascript" src="<?php echo base_url();?>/js/jquery.capSlide.js"></script>

</head>
<body>

  <nav class="navbar navbar-default" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><span class="glyphicon glyphicon-home"></span> Home</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#"><span class="glyphicon glyphicon-calendar"></span> Travel itinerary</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-book"></span> Booking <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li role="presentation" class="dropdown-header">Traffic</li>
            <li><a href="#"><span class="glyphicon glyphicon-plane"></span>  Plane</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-road"></span>  Train</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-tree-conifer"></span>  Taxi</a></li>
            <li role="presentation" class="divider"></li>
            <li role="presentation" class="dropdown-header">Place</li>
            <li><a href="#"><span class="glyphicon glyphicon-cutlery"></span>  Hotel</a></li>
          </ul>
        </li>
      </ul>
      <form id="custom-search-form" class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input id="SearchString" name="SearchString" type="text" class="form-control search-query" size="35" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default btn-lg">
          <span class="glyphicon glyphicon-search"></span>
        </button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span> Ngôn ngữ <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="<?php echo base_url();?>/index.php/category_controller/lightbox/vni">vni-VietName</a></li>
            <li><a href="<?php echo base_url();?>/index.php/category_controller/lightbox">ens-United State</a></li>
            <li><a href="#">jp-Japan</a></li>
            <li><a href="#">other - comming soon :v</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </nav>

  <!-- <h1>This is category view</h1> -->
  <!-- <img id="iamge-test" src="<?php echo base_url();?>/images/users/arsenal.jpg" alt="..." class="img-circle"> -->

  <div class="row">



  </div>


  <div class="row">

    <div class="col-lg-2" id="history"></div> <!-- #history -->

    <div class="col-lg-3" id="status">

      <div class="row">

        <div id="status-post">

          <form id="form-status-post" class="form-horizontal" role="form">

            <div class="form-group">
              <div class="col-lg-12">                
                <textarea rows="3" class="form-control" id="status-post-content" placeholder="Viết thứ gì đó ..."></textarea>
              </div>
            </div>

            <div class="form-group">
              <div class="col-lg-12">

                <button id="text" type="button" class="btn btn-danger">
                  <span class="glyphicon glyphicon-pencil"></span> Chữ
                </button><!-- &nbsp; -->

                <button id="link" type="button" class="btn btn-primary">
                  <span class="glyphicon glyphicon-link"></span> Chia sẻ
                </button><!-- &nbsp;  -->

                  <a id="btn-photo" class="btn btn-success" data-toggle="modal" href="#snapshootModal">
                  <span class="glyphicon glyphicon-camera"></span> Ảnh
                  </a>

                <button id="btn-video" type="button" class="btn btn-warning">
                  <span class="glyphicon glyphicon-facetime-video"></span> Video
                </button>

              </div>
            </div>

          </form> <!-- #form-status-post -->

        </div> <!-- #status-post -->

      </div>

      <div class="row">

        <div id="status-list">


          <div class="status-message">

            <div class="message-header">
              <div class="user-image">
                <img src="<?php echo base_url();?>/images/users/tuan.jpg" alt="..." class="img-circle">
              </div>
              <div class="user-info">
                <span class="user-info-name">Tuan</span>
                <span class="user-info-date">1/1/2011 9:0 AM</span>
              </div>
            </div> <!-- .message-header -->

            <hr />

            <div class="message-body">

              <p>Double coffee, double milk, sitting and looking at the computer screen :)
               Vài đứa đã đi làm, vài đứa đang mải mê học (mày mò) thêm vài thứ gì đấy :
             </p>

             <p>
              <button id="btn-like" type="button" class="btn btn-xs btn-danger">
                <span class="glyphicon glyphicon-thumbs-up">19</span>
              </button>

              <button id="btn-like" type="button" class="btn btn-xs btn-primary">
                <span class="glyphicon glyphicon-share-alt">18</span>
              </button>
            </p>

            <div>
              <form id="form-comment" class="form-inline" role="form">
                <div class="form-group">                      
                  <input type="text" class="form-control" id="comment" placeholder="Bình luận">
                </div>
              </form>
            </div>

          </div> <!-- .message-body -->  

        </div> <!-- .status-message -->


        <div class="status-message">

          <div class="message-header">
            <div class="user-image">
              <img src="<?php echo base_url();?>/images/users/Tan.jpg" alt="..." class="img-circle">
            </div>
            <div class="user-info">
              <span class="user-info-name">Tan Nguyen</span>
              <span class="user-info-date">1/1/2011 9:0 AM</span>
            </div>
          </div> <!-- .message-header -->

          <hr />

          <div class="message-body">

            <p>Double coffee, double milk, sitting and looking at the computer screen :)
             Vài đứa đã đi làm, vài đứa đang mải mê học (mày mò) thêm vài thứ gì đấy :
           </p>

           <p>
            <button id="btn-like" type="button" class="btn btn-xs btn-danger">
              <span class="glyphicon glyphicon-thumbs-up">19</span>
            </button>

            <button id="btn-like" type="button" class="btn btn-xs btn-primary">
              <span class="glyphicon glyphicon-share-alt">18</span>
            </button>
          </p>

          <div>
            <form id="form-comment" class="form-inline" role="form">
              <div class="form-group">                      
                <input type="text" class="form-control" id="comment" placeholder="Bình luận">
              </div>
            </form>
          </div>

        </div> <!-- .message-body -->  

      </div> <!-- .status-message -->

    </div> <!-- #status-list -->

  </div>

</div>

<div class="col-lg-4" id="recommend">

  <div class="row" id="recommend-visit-list">

    <div class="col-lg-12">

      <h4>Những điểm đến hấp dẫn</h4>

      <div class="recommend-visit-list">

        <div class="row recommend-visit-list-visit">

          <a  href="<?php echo base_url();?>/images/visit/visit1.jpg" data-lightbox="visit-1" title="Click on the right side of the image to move forward.">
            <img class="img-rounded img-responsive recommend-visit-list-image" src="<?php echo base_url();?>/images/visit/visit1.jpg"/>            
          </a>

          <a class="image-hide" href="<?php echo base_url();?>/images/visit/image-4.jpg" data-lightbox="visit-1" title="Or press the right arrow on your keyboard."></a>

          <a class="image-hide" href="<?php echo base_url();?>/images/visit/image-5.jpg" data-lightbox="visit-1" title="The script preloads the next image in the set as you're viewing."></a>

          <a class="image-hide" href="<?php echo base_url();?>/images/visit/image-6.jpg" data-lightbox="visit-1" title="Click anywhere outside the image or the X to the right to close."></a>

        </div><hr /> <!-- .recommend-visit-list-visit -->

        <div class="row recommend-visit-list-visit">

          <a  href="<?php echo base_url();?>/images/visit/visit2.gif" data-lightbox="visit-2" title="Click on the right side of the image to move forward.">
            <img class="img-rounded img-responsive recommend-visit-list-image" src="<?php echo base_url();?>/images/visit/visit2.gif"/>
          </a>

          <a class="image-hide" href="<?php echo base_url();?>/images/visit/image-2.jpg" data-lightbox="visit-2" title="Or press the right arrow on your keyboard."></a>

          <a class="image-hide" href="<?php echo base_url();?>/images/visit/image-5.jpg" data-lightbox="visit-2" title="The script preloads the next image in the set as you're viewing."></a>

          <a class="image-hide" href="<?php echo base_url();?>/images/visit/image-6.jpg" data-lightbox="visit-2" title="Click anywhere outside the image or the X to the right to close."></a>

        </div><hr /> <!-- .recommend-visit-list-visit -->  

      </div><!-- .recommend-visit-list -->


    </div>

  </div>    


  <div class="row" id="recommend-friend-list">

    <div class="col-lg-12">

      <h4>Bạn có thể biết</h4>

      <div class="row recommend-friend-list-friend">

        <div class="col-lg-3">
          <img id="iamge-test" src="<?php echo base_url();?>/images/users/tan.jpg" alt="..." class="img-rounded recommend-friend-image">
        </div>

        <div class="col-lg-4">
          <p>Nguyen Van Tan</p>
          <p>
            <button id="btn-add" type="button" class="btn btn-xs btn-success">
              <span class="glyphicon glyphicon-plus"></span>
            </button>
          </p>
        </div>

      </div><hr /> <!-- .recommend-friend-list-friend -->


      <div class="row recommend-friend-list-friend">

        <div class="col-lg-3">
          <img id="iamge-test" src="<?php echo base_url();?>/images/users/tuan.jpg" alt="..." class="img-rounded recommend-friend-image">
        </div>

        <div class="col-lg-4">
          <p>Luc Minh Tuan</p>
          <p>
            <button id="btn-add" type="button" class="btn btn-xs btn-success">
              <span class="glyphicon glyphicon-plus"></span>
            </button>
          </p>
        </div>

      </div><hr /> <!-- .recommend-friend-list-friend -->


      <div class="row recommend-friend-list-friend">

        <div class="col-lg-3">
          <img id="iamge-test" src="<?php echo base_url();?>/images/users/khang.jpg" alt="..." class="img-rounded recommend-friend-image">
        </div>

        <div class="col-lg-4">
          <p>Khang</p>
          <p>
            <button id="btn-add" type="button" class="btn btn-xs btn-success">
              <span class="glyphicon glyphicon-plus"></span>
            </button>
          </p>
        </div>

      </div><hr /> <!-- .recommend-friend-list-friend -->




    </div>

  </div><!--  #recommend-friend-list -->

</div> <!-- #recommend -->

<div class="col-lg-2" id="suggest"></div> <!-- #suggest -->

</div> <!-- #row-body -->

<script type="text/javascript" src="<?php echo base_url();?>/js/snapshoot.js"></script>
</body>
</html>